<template>
	<view class="search-box">
		<view class="search-content">
			<icon type="search" size="18" />
			<input type="text" v-model="inputValue" placeholder="请输入你想要的商品" @confirm="confirmHandler" confirm-type="search" />
		</view>
	</view>
</template>

<script>
	export default {
		props: ['keyword'],
		data() {
			return {
				inputValue: this.keyword
			}
		},
		methods: {
			confirmHandler() {
				this.$emit('search', this.inputValue)
			}
		},
		watch: {
			keyword(newValue) {
				console.log(newValue)
				this.inputValue = newValue
			}
		}
	}
</script>

<style lang="less">
	.search-box {
		height: 60rpx;
		background-color: #eee;
		padding: 30rpx 16rpx;

		.search-content {
			display: flex;
			align-items: center;
			height: 60rpx;
			background-color: #fff;
			border-radius: 6rpx;

			icon {
				text-align: right;
				width: 65rpx;
			}

			input {
				flex: 1;
				margin-left: 15rpx;
			}
		}
	}
</style>
